<template>
	<div class="ph-tab-item" :title="text">
		<ph-button class="ph-tab-btn" :active="active" :icon="icon" :type="type" @click="!active&&$emit('shift')">
			<slot></slot>
		</ph-button>
	</div>
</template>
<script lang="ts">
import { defineComponent  } from 'vue'
import {PhButton} from '../base'
export default defineComponent({
	props:{
		icon:{type:String},
		active:{type:Boolean},
		// closable:{type:Boolean},
		type:{
            type:String,
			default:'transparent'
        }
	},
	components:{PhButton},
	setup(props,{slots}){
		const text = (slots as any).default()[0]?.children
		return {text}
	}
	
})
</script>
<style lang="scss">
	@import '../../assets/scss/predef.scss';
	.ph-tab-item{
		flex:0 0 auto;
		position:relative;
		white-space: nowrap;
		.ph-tab-btn{
			overflow: hidden;
			text-overflow: ellipsis;
			padding: var(--ph-tab-item-padding);
			&.ph-action-active,
			&.ph-action-active:hover{
				cursor:default;
			}
		}
		.ph-action-transparent{
			&.ph-action-active,
			&.ph-action-active:hover{
				color: var(--ph-theme);
				@include bg(transparent);
			}
			&:hover{
				color: var(--ph-theme);
				@include bg(var(--ph-light-l1));
			}
		}
		:not(.ph-action-transparent){
			border-bottom: none;
			&.ph-action-active,
			&.ph-action-active:hover{
				cursor:default;
				@include bg(var(--ph-theme));
			}
		}
	}
</style>